<template>
  <div class="login">
    <div class="mark">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="活动名称">
          <el-input v-model="form.userName"></el-input>
        </el-form-item>

        <el-form-item label="活动名称">
          <el-input v-model="form.passWord"></el-input>
        </el-form-item>

    
        <el-form-item>
          <el-button style="width: 100%" type="primary" @click="onSubmit">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// import { admin, teac, stu } from '../router/auth'
import { mapMutations } from 'vuex'
import list from '../router/auth'
export default {
  name: "Login",
  data() {
    return {
      form: {
        userName: "",
        passWord: ""
      },
    };
  },
  methods: {
    ...mapMutations(['setList']),
    onSubmit() {
        // 第二次
        let str = this.form.userName
        list[0].children = list[0].children.filter(item => item.auth.includes(str))
        this.setList({
            list
        })
        this.$router.addRoutes(list)
        this.$router.push('/home')






        // 第一次
        // let str = this.form.userName
        // if (str === 'admin') {
        //     this.$router.addRoutes(admin)
        //     sessionStorage.setItem('list', JSON.stringify(admin))
        //     this.$router.push('/home')
        // } else if (str === 'teac') {
        //     this.$router.addRoutes(teac)
        //     sessionStorage.setItem('list', JSON.stringify(teac))
        //     this.$router.push('/home')
        // } else if (str === 'stu') {
        //     this.$router.addRoutes(stu)
        //     sessionStorage.setItem('list', JSON.stringify(stu))
        //     this.$router.push('/home')
        // } else {
        //     this.$message('账号错误')
        // }
        // this.$router.addRoutes(auth)
        
       // this.$router.addRoutes(auth)  添加多个路由信息
        // console.log(this.$router)
    },
  },
};
</script>

<style scoped>
.login {
  height: 100%;
  background: #0b0b86;
  position: relative;
}
.mark {
  position: absolute;
  border-radius: 10px;
  width: 500px;
  padding: 25px;
  background: #fff;
  height: 180px;
  right: 100px;
  top: 300px;
}
</style>
